<template>
  <!-- 品牌分析总页面（入口,数据更新时间存在问题+） -->
  <div class="brandRank" id="brandRank" :class="{ box_fixed: isFixed }" v-if="basics">
    <!-- 更新时间 -->
    <!-- <div class="refreshBox main">
      数据更新时间：{{ basics.summaryDate }}
      <img src="../../assets/three/refreshIcon.png" @click="refresh" />
    </div> -->
    <!-- 品牌基础信息 -->
    <div class="databox main" :class="{ fixed: isFixed }" ref="headerBox">
      <div class="logo_box">
        <img :src="basics.logo" @click="ImgPreview(basics.logo)" v-if="basics.logo"/>
        <i v-else>{{basics.brandName.slice(0,1)}}</i>
      </div>
      <div class="title_head">
        <div class="tit">{{ basics.brandName }}</div>
        <div class="heat" v-if="heatindexs.hot?1:0">
          <p>{{ heatindexs.hot }}热度指数</p>
          <p v-if="heatindexs.increase < 0">-{{ formatRate(Math.abs(heatindexs.increase), 2) }}%指数涨幅</p>
          <p v-if="heatindexs.increase > 0">{{ formatRate(heatindexs.increase, 2) }}%指数涨幅</p>
          <p v-if="heatindexs.increase === 0">-- 指数涨幅</p>
        </div>
        <!-- <p class="datafrom">数据取自{{ dateTime }}</p> -->
        <p class="datafrom" v-if="value01">数据取自{{ value01 }}</p>
      </div>
    </div>
    <div class="lines"></div>
    <!-- 数据概览 -->
    <div class="numdata main">
      <div class="title">数据概览</div>
      <div class="databoxs">
        <div>
          <span>{{ format_num(basics.productTotal) }}</span>商品总数
        </div>
        <div>
          <span>{{ format_num(basics.salesTotal) }}</span>商品总销量
        </div>
        <div>
          <span>{{ format_num(basics.salesTotalPrice) }}</span>商品总销售额
        </div>
        <div>
          <span>{{ format_num(basics.lives) }}</span>关联直播
        </div>
        <div>
          <span>{{ format_num(basics.salesLive) }}</span>直播销量
        </div>
        <div>
          <span>{{ format_num(basics.salesLivePrice) }}</span>直播销售额
        </div>
        <!-- <div>
          <span>{{ format_num(basics.productTotal) }}</span>商品总数
        </div>
        <div>
          <span>{{ format_num(basics.orderTotal) }}</span>30天订单量
        </div>
        <div>
          <span>{{ format_num(basics.salesTotalPrice) }}</span>30天总销售额
        </div>
        <div>
          <span>{{ format_num(basics.authors) }}</span>30天关联达人
        </div>
        <div>
          <span>{{ format_num(basics.awemes) }}</span>30天带货视频
        </div>
        <div>
          <span>{{ format_num(basics.lives) }}</span>30天关联直播
        </div> -->
      </div>
    </div>
    <div class="lines"></div>
    <!-- tab -->
    <van-tabs
      v-model="activeName"
      title-class="tab-name"
      :sticky="true"
      offset-top="2.3rem"
      @scroll="tabScrollFn"
      scrollspy
      :duration="0.1"
    >
      <van-tab title="热度分析" name="a">
        <heat class="model_interval" />
      </van-tab>
      <van-tab title="视频详情" name="b">
        <aboutvideo class="model_interval" />
      </van-tab>
      <van-tab title="关联直播" name="c">
        <aboutlives class="model_interval" />
      </van-tab>
      <van-tab title="关联商品" name="c">
        <aboutgoods class="model_interval" />
      </van-tab>
      <van-tab title="关联达人" name="c">
        <abouttalent class="model_interval" />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { ImagePreview } from 'vant';
import heat from './heat.vue';
import aboutvideo from './aboutvideo.vue';
import aboutlives from './aboutlives.vue';
import aboutgoods from './aboutgoods.vue';
import abouttalent from './abouttalent.vue';
export default {
  components: { heat, aboutvideo, aboutlives, aboutgoods,abouttalent },
  data() {
    return {
      activeName: 'a',
      basics: null,
      dateTime: '', // 数据取自与
      startDateTime: '',
      endDateTime: '',
      dateTime: '',
      heatindexs: '', //热度指数
      isFixed: false,
      tabIsfixed: false, //  tab是否吸顶
      startDateTime: '',
      endDateTime: '',
      dateTime: '',
      hasRoot: true,
      //周期
      period: [],
      value01: '', // 第*周期
      startDate: '', // 开始时间[周期]
      endDate: '' // 结束时间[周期]
    };
  },
  watch: {
    beforeDestroy() {
      window.removeEventListener('scroll', this.setHeaderFixed); //释放window的滑动事件
    }
  },
  created() {
    this.getperiod().then(vipLevel => {
      if (vipLevel == 0) return;
      this.data();
    }); // 获取周期 （数据）
    this.getbasics();
  },
  mounted() {
    window.onscroll = e => {
      this.setHeaderFixed();
    };
  },
  methods: {
    tabScrollFn(callbackPms) {
      this.tabIsfixed = callbackPms.isFixed;
    },
    setHeaderFixed() {
      //设置顶部浮动方法
      let headerBoxEl = this.$refs.headerBox;
      if (!headerBoxEl) return;
      if (!this.isFristScroll) {
        let elTop = headerBoxEl.offsetTop;
        this.fixedVal = elTop;
        this.isFristScroll = true;
      }
      let elHeight = headerBoxEl.offsetHeight;
      let windowHeight = window.screen.height;
      let documentHeight = document.body.offsetHeight || document.body.clientHeight;
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      if (scrollTop >= this.fixedVal && documentHeight > windowHeight + elHeight) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
    // 头部刷新
    refresh() {
      this.basics = null;
      this.getbasics();
    },
    // 获取 周期 （数据）
    getperiod() {
      return new Promise((resolve, reject) => {
        this.$axios
          .get('api/Brand/Periods')
          .then(res => {
            if (res.data.code == 0) {
              res.data.data.map((item, ind) => {
                this.period.push(
                  `第${item.cycle}期${item.startDate
                    .split(' ')[0]
                    .replace('-', '.')
                    .replace('-', '.')}-${item.endDate
                    .split(' ')[0]
                    .replace('-', '.')
                    .replace('-', '.')}`
                );
                return this.period;
              });
              this.value01 = this.period[0];
              this.startDate = this.period[0].substring(5, 15);
              this.endDate = this.period[0].substring(16, 26);
              resolve(this.period[0].substring(5, 15), this.period[0].substring(16, 26));
            }
          })
          .catch(err => {
            console.log(err);
          });
      });
    },
    data() {
      this.$axios
        .get('/api/Brand/HotIndex', {
          params: {
            brandId: this.$route.query.id,
            startDate: this.startDate,
            endDate: this.endDate
          }
        })
        .then(res => {
          if (res.data.code == 1003) {
            this.hasRoot = false;
          }
          if (res.data.code == 0) {
            if (res.data.data != null) {
              this.heatindexs = res.data.data;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //  品牌  基础信息
    getbasics() {
      this.$axios
        .get('/api/Brand/DetailsNew', {
          params: {
            brandId: this.$route.query.id
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            this.basics = res.data.data;
          }
        });
        // .get('/api/Brand/Details', {
        //   params: {
        //     brandId: this.$route.query.id
        //   }
        // })
        // .then(res => {
        //   if (res.data.code == 0) {
        //     this.basics = res.data.data[0];
        //   }
        // });
    },
    // 图片预览（放大）
    ImgPreview(imgurl) {
      ImagePreview({
        images: [imgurl],
        closeable: true
      });
    }
  }
};
</script>
<style lang="less" scoped>
.main {
  width: 9.2rem;
  margin: 0 auto;
}
.lines {
  width: 100%;
  height: 0.1866rem;
  background: #f1f1f1;
}
.model_interval {
  padding-top: 0.01rem !important;
}
.brandRank {
  //   更新时间
  .refreshBox {
    box-sizing: border-box;
    width: 9.2rem;
    margin: 0 auto;
    height: 0.88rem;
    line-height: 0.88rem;
    background-color: #f5f5f5;
    border-radius: 0.053333rem;
    border: solid 0.013333rem #e5e5e5;
    margin-top: 0.386667rem;
    position: relative;
    font-size: 0.34rem;
    color: #888;
    text-align: center;
    img {
      width: 16px;
      height: 16px;
      cursor: pointer;
      font-size: 0.373333rem;
      position: absolute;
      right: 0.4rem;
      top: 0.24rem;
    }
  }
  // 品牌基础信息
  .databox {
    display: flex;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    .logo_box {
      width: 1.6rem;
      height: 1.6rem;
      border-radius: 50%;
      border: 1px solid #e5e5e5;
      margin-right: 0.2666rem;
      overflow: hidden;
      i{
        width: 100%;
        height: 100%;
        color: #ffa500;
        background-color: #fff1e8;
        display: flex;
        justify-content: center;
        align-items: center;
        font-style: normal;
        font-size: 0.54rem;
        cursor: pointer;
      }
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .tit {
      font-size: 0.3733rem;
      color: #222;
    }
    .title_head {
      align-self: center;
    }
    .heat {
      display: flex;
      p {
        display: inline-block;
        padding: 0.11rem 0.1066rem;
        font-size: 0.266rem;
        color: #555;
        background: #fff7ed;
        border-radius: 4px;
        margin: 0.1rem 0;
      }
      p:nth-of-type(2) {
        margin-left: 0.186667rem;
      }
    }
    .datafrom {
      font-size: 0.346667rem;
      color: #888;
    }
    // 吸顶样式
    &.fixed {
      position: fixed;
      top: 0;
      width: 10rem;
      margin-top: 0;
      padding: 0.4rem 0.4rem;
      z-index: 19;
      background: #fff;
      box-sizing: border-box;
      &:after {
        content: '';
        position: absolute;
        bottom: 0rem;
        left: 0;
        width: 100%;
        height: 0.18666rem;
        background-color: #f1f1f1;
      }
      .tit {
        transform: translateY(-0.1rem);
      }
      .heat {
        transform: translateY(-0.1rem);
      }
      .datafrom {
        display: none;
      }
    }
  }
  // 数据概览
  .numdata {
    padding-top: 0.4rem;
    .title {
      position: relative;
      font-size: 0.4rem;
      color: #222;
      padding-left: 0.2rem;
    }
    .title::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0.1rem;
      display: inline-block;
      width: 0.08rem;
      height: 0.3733rem;
      background-color: #fd7f2c;
      border-radius: 0.1333rem;
    }
    .databoxs {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      padding: 0.906667rem 0;
      div {
        width: 33.3%;
        text-align: center;
        font-size: 0.32rem;
        color: #888;
        span {
          display: block;
          font-family: DINPro-Medium;
          font-size: 0.453333rem;
          color: #222;
          margin-bottom: 0.1333rem;
        }
      }
      div:nth-of-type(1),
      div:nth-of-type(2),
      div:nth-of-type(3) {
        margin-bottom: 0.7733rem;
      }
    }
  }
}
</style>
